<template>
	<view class="container">
		<uni-nav-bar class="ch-nav" height="88rpx" backgroundColor="#ffffff" leftWidth="90rpx" rightWidth="90rpx" color="#333" :fixed="true" :padding="false" :border="navBorder" @clickLeft="$goBack(1)">
			<template slot="left">
				<image class="left" src="@/public/images/public/dhl_fhjt.png" mode="aspectFit"></image>
			</template>
			<text class="title">解锁的料</text>
		</uni-nav-bar>
		<view class="body bottom-ios">
			<EmptyContent v-if="!unLockList[0]" top="160rpx" text="暂无解锁的料" img="qsy_zwxl" @refresh="getUnLockArticle"></EmptyContent>
			<view class="article-list flex-c" v-else>
				<view class="article-detail-item flex-c" v-for="(article, index) in unLockList" :key="article.id" @tap="$CHS.goArticleDetail(article.id)">
					<view class="item-info text-secondary flex-r ac jsb mg20">
						<text>解锁时间：{{article.createTime.replace(/-/g, '.').substring(0, 16)}}</text>
						<text :class="{'color-grey': article.result}">{{article.result ? '已结束' : '未开赛'}}</text>
					</view>
					<view class="item-head flex-r ac" @tap.stop="$CHS.goExpertHome(article.expertId)">
						<view class="author-image border-round">
							<lazy-image class="inheritwh border-round" :src="article.expertAvatar+'?imageView2/1/w/100/h/100/q/50'" type="expert" fit="cover"></lazy-image>
							<view class="expert-note" v-if="article.saleArticleNum" :class="{'round': article.saleArticleNum < 10}">
								<text>{{article.saleArticleNum}}</text>
							</view>
						</view>
						<view class="author-info flex-c">
							<view class="info-top flex-r ac">
								<text class="text-secondary text-bold">{{article.expertName}}</text>
								<image class="icon" v-if="article.cardFlag == 1" src="@/public/images/public/y@1x.png" mode="aspectFit"></image>
								<text class="tag-red" v-if="article.hotContineTxt">{{article.hotContineTxt}}</text>
								<text class="tag-gold" v-else-if="article.hitResultTxt">{{article.hitResultTxt}}</text>
							</view>
							<text class="text-info color-grey text-hidden">{{article.expertTag}}</text>
						</view>
					</view>
					<view class="item-body flex-c">
						<view class="item-body-info flex-r ac">
							<view class="article-title text-hidden two">
								<image v-if="article.articleType=='2'" class="spfa" src="@/public/images/index/spfa.png" ></image> 
								<text class="text-primary">{{article.title}}</text>
							</view>
							<!-- <view class="card-free" v-if="article.label == '1' && article.finish != 1 && !article.result && (article.endPayTime && new Date(article.endPayTime.replace(/-/g, '/')) > new Date())">
								<image src="@/public/images/public/yxmd.png" mode="aspectFit"></image>
							</view> -->
						</view>
						<ArticleMatch v-if="article.matchInfoList && article.matchInfoList[0]" :matchList="article.matchInfoList"></ArticleMatch>
						<!-- 视频料缩略图 -->
						<!-- <template v-if="article.articleType==2">
							<view class="item-body-video" v-if="article.videoUrl">
								<FullVideo :url="article.videoUrl" :article="true" width="670rpx" height="376rpx"></FullVideo>
							</view>
							<view class="item-body-video" v-else>
								<FullVideo :poster="require('@/public/images/public/t1-ys.jpg')" :article="true" width="670rpx" height="376rpx" v-if="article.sportId == 1"></FullVideo>
								<FullVideo :poster="require('@/public/images/public/lqt-ys.jpg')" :article="true" width="670rpx" height="376rpx" v-else></FullVideo>
							</view>
						</template> -->
					</view>
					<view class="item-foot flex-r">
						<view class="item-foot-info text-info color-grey flex-r ac">
							<uni-dateformat class="date" :date="article.displayTime" :threshold="[60000, 12*3600000]" format="MM-dd hh:mm"></uni-dateformat>
							{{new Date() - new Date(article.displayTime.replace(/-/ig, '/')) < 12*3600000 ? '发布' : ''}}
						</view>
						<view class="item-foot-type text-info flex-r ac">
							<!-- <view class="type-info color-red">
								<text v-if="article.state == 1">{{article.backFlag == 1 ? '已返还至账户' : '不中返还'}}</text>
								<text v-else-if="article.state == 3">{{article.supplementFlag == 1 ? '专家已补单' : '不中补单'}}</text>
								<text v-else-if="article.supplementFlag == 1">专家已补单</text>
							</view> -->
							<view class="type-price flex-r ac">
								<text class="vip-price" :class="{'color-green': cardType == 3}">{{cardType != 3 ? '优享免费解锁' : '次卡解锁'}}</text>
								<text class="color-blue" v-if="article.finish == 1 || article.result || (article.endPayTime && new Date(article.endPayTime.replace(/-/g, '/')) < new Date())">查看</text>
								<template v-else>
									<text class="delete">{{article.payBeanValue}}</text>
									<image src="@/public/images/public/chd_dd.png" mode="aspectFit"></image>
								</template>
							</view>
						</view>
					</view>
					<view class="item-icon" v-if="article.matchInfoList && article.result">
						<image :src="require('@/public/images/article/res_'+article.result+(article.result == 1 ? '_'+article.matchInfoList.length : '')+'.png')" mode="aspectFit"></image>
					</view>
				</view>
			</view>
			<view class="list-end flex-r pb20" v-if="isEnd">
				<text>已经到底啦～</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cardId: null,
				cardType: 0,
				unLockList: [],
				isEnd: false,
				pageNo: 1,
				
				navBorder: false
			};
		},
		components: {
			ArticleMatch: () => import("@/components/ch-article/ch-articlematch.vue"),
		},
		onLoad(e) {
			if(this.$Route.query.cardId){
				this.cardId = this.$Route.query.cardId
				this.cardType = this.$Route.query.cardType
				this.getUnLockArticle()
			}else{
				console.log('非法请求');
				this.$CHS.errorRequest('userhome', '数据请求错误，请返回重试');
			}
		},
		onPageScroll(e) {
			if(e.scrollTop > 10){
				this.navBorder = true
			}else{
				this.navBorder = false
			}
		},
		onReachBottom() {
			if(!this.isEnd){
				this.getUnLockArticle()
			}
		},
		methods: {
			//查询解锁的料
			getUnLockArticle(cardId){
				this.$http.get({
					url: '/api/user/article/cardUnlock',
					data: {
						id: this.cardId,
						pageNo: this.pageNo,
						pageSize: 10
					}
				}).then(data => {
					console.log(data);
					if(data.success && data.result.total){
						if(this.pageNo == 1){
							this.unLockList = data.result.records
						}else{
							this.unLockList.push(...data.result.records)
						}
						this.isEnd = data.result.current >= data.result.pages
						this.pageNo = data.result.current + 1
					}
				}).catch((err) => {
					console.log(err);
				})
			},
		}
	}
</script>

<style lang="scss">
	.container{
		padding: 0;
	}
	.body{
		.article-list{
			padding: 20rpx 20rpx 0;
			.article-detail-item{
				margin-bottom: 20rpx;
				background: #FFFFFF;
				border-radius: 10rpx;
				position: relative;
				.item-info{
					height: 96rpx;;
					box-shadow: 0 1rpx 0 0 #EDEDED;
				}
				.item-head{
					z-index: 2;
					margin: 30rpx 20rpx 0;
					.author-image{
						position: relative;
						width: 80rpx;
						height: 80rpx;
						background-color: #FFFFFF;
						background-size: 100%;
					}
					.author-info{
						flex: 2;
						margin-left: 20rpx;
						.info-top{
							.icon{
								margin-left: 8rpx;
								width: 24rpx;
								height: 24rpx;
							}
						}
						.text-info{
							margin-top: 15rpx;
							max-width: 150rpx;
						}
					}
				}
				.item-body{
					z-index: 2;
					margin: 20rpx 20rpx 0;
					.item-body-info{
						position: relative;
						margin-bottom: 20rpx;
						.article-title{
							width: 670rpx;
							line-height: 42rpx;
							z-index: 2;
							.spfa{
								width: 112rpx;
								height: 32rpx;
								vertical-align: text-bottom;
								margin-top: -4rpx;
								margin-right: 20rpx;
								line-height: 42rpx;
							}
						}
						.card-free{
							position: absolute;
							right: 0;
							height: 82rpx;
							image{
								width: 82rpx;
								height: 82rpx;
							}
							z-index: 1;
						}
					}
					.item-body-events {
						background: #F4F8FF;
						border-radius: 10rpx;
						padding: 0 20rpx;
						margin-bottom: 30rpx;
						.events-left{
							width: 100%;
							.event-detail{
								padding: 20rpx 0;
								align-items: flex-start;
								font-size: 22rpx;
								font-family: Arial;
								color: #999999;
								.event-btn{
									background: #D9E5FF;
									border-radius: 6rpx;
									line-height: 20rpx;
									font-size: 20rpx;
									color: #4C88FF;
									padding: 10rpx;
									white-space: nowrap;
								}
								.event-info{
									margin-left: 15rpx;
									line-height: 40rpx;
								}
								.event-date{
									margin: 0 15rpx;
									line-height: 22rpx;
								}
								.event-name{
									line-height: 28rpx;
								}
								.event-team{
									margin: 0 15rpx;
									line-height: 28rpx;
								}
							}
							.event-detail.border{
								border-top: 1rpx #E6E9ED solid;
			
							}
						}
						.events-right{
							text-align: right;
							height: 80rpx;
							width: 36rpx;
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}
					.item-body-video{
						margin: 20rpx 0 0;
						width: 670rpx;
						height: 376rpx;
						border-radius: 10rpx;
						.play{
							position: relative;
							image{
								border-radius: 10rpx;
							}
							.btn{
								position: absolute;
								width: 120rpx;
								height: 120rpx;
							}
						}
					}
				}
				.item-foot{
					margin: 20rpx 20rpx 30rpx;
					justify-content: space-between;
					.item-foot-info{
						.views{
							margin-left: 20rpx;
						}
					}
					.item-foot-type{
						display: flex;
						align-items: center;
						.type-info{
							font-size: 22rpx;
							line-height: 24rpx;
							margin-right: 10rpx;
						}
						.type-price{
							image{
								width: 24rpx;
								height: 24rpx;
								margin-left: 15rpx;
							}
							.delete{
								color: #F23030;
								text-decoration:line-through;
							}
							.vip-price{
								color: #99681F;
								margin-right: 15rpx;
								&.color-green{
									color: #1100FF;
								}
							}
						}
					}
				}
				.item-icon{
					position: absolute;
					top: 98rpx;
					right: 0;
					image{
						width: 97rpx;
						height: 97rpx;
					}
					z-index: 1;
				}
			}
		}
	}
</style>
